<template>
	<view class="scv"> 
		<view class="maskClass" v-show="showMask" >
		    <view v-show="showMask" style="width:80%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 45% auto;z-index: 1;">
				<view class="login_from_input">
					<view class="form-left">原手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="oldMobile" placeholder="请输入联系电话"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left" >验证码</view>
					<view class="login_from_fun">
						<input type="number" style="width: 55%; text-align: left" maxlength="6" placeholder="验证码" v-model="authCode">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">新手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="newMobile" placeholder="请输入联系电话"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="changeMobile()">确定</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
		    </view>
		</view>
		<view class="maskClass" v-show="showPassword" >
		    <view v-show="showPassword" style="width:80%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 45% auto;z-index: 1;">
				<!-- <view class="login_from_input">
					<view class="form-left">手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="oldMobile" placeholder="请输入联系电话"></view>
				</view> -->
				<view class="login_from_input">
					<view class="form-left" >验证码</view>
					<view class="login_from_fun">
						<input type="number" style="width: 55%; text-align: left" maxlength="6" placeholder="验证码" v-model="authCode">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">新密码</view>
					<view class="login_from_fun"><input password="true"  v-model="newPassword" placeholder="请输入新密码"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">确认密码</view>
					<view class="login_from_fun"><input password="true"  v-model="newRepeatPassword" placeholder="请确认新密码"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="changePassword()">确定</button>
					<button type="warn" class="canncle" @click="closePassword()">取消</button>
				</view>
		    </view>
		</view>
		<image style="position: fixed;top:0;left:0;height: 35%;width:100vw;" src="http://113.142.144.25:9301/statics/appimg/user_center_bg.png"></image>
		<view>
			<image style="height: 50rpx; width: 50rpx;float: left;position: fixed;top: 8%;left: 5%;" src="../../../static/images/icon_back.png" @click="goBack()"></image>
		</view>
		<view style="text-align: center;position: fixed;top: 15%;left:40%">
			<view class="center_img" @tap="gotoFeeds()" >
				<image :src="userInfo.avatar ? userInfo.avatar : '../../../static/images/myIcon.png'"></image>
			</view>
			<text style="color: #fff;" @click="updateMember()">点击修改头像</text>
		</view>
		<view style="position: fixed;top: 35%;width: 100%;padding:35rpx ;">
			<view class="devideline" ></view>
			<view @click="toggle()" style="background-color: #fff; margin-top: 25rpx;">
				<view class="form-left">修改手机号</view>
				<image style="height: 35rpx;width: 35rpx;float: right;" src="http://113.142.144.25:9301/statics/appimg/arrow1_new.png" mode=""></image>
			</view>
			<view class="devideline" ></view>
			<view @click="togglePassword()" style="background-color: #fff;">
				<view class="form-left">修改密码</view>
				<image style="height: 35rpx;width: 35rpx;float: right;" src="http://113.142.144.25:9301/statics/appimg/arrow1_new.png" mode=""></image>
			</view>
			<view class="devideline"></view>
		</view>
	</view>
</template>

<script>
	// 引入vuex
		import {
			mapState,
			mapMutations,
			mapGetters
		} from 'vuex';
		
		import * as user from '@/api/login.js'
		import * as register from '@/api/register.js'
		import * as member from "@/api/personCenter/index.js"
		import env from "@/utils/env.js"
		
		export default {
			data() {
				return {
					id:'',
					image:'',
					userInfo:{},
					nickName:'',
					wx_userInfo:{},
					userDetail:{},
					noData:'加载中。。。',
					showNodata:true,
					isBack:false,
					total:0,
					showMask:false,
					showPassword:false,
					Qztime:'',
					QzyzmStare:false,
					Qztext:'点击获取',
					authCode:'',
					oldMobile:'',
					newMobile:'',
					oldPassword:'',
					newPassword:'',
					newRepeatPassword:''
				}
			},
			onLoad(option) {
				this.id = option.id
				uni.showLoading({})
				this.getUserDetail(this.id)
			},
			onShow(){
				if(!this.isBack && this.total<1){
					this.total = this.total+1
					uni.showLoading({})
					this.getUserDetail(this.id)
				}
			},
			methods: {
				getUserDetail(id){
					member.getMemberInfo(id).then((res)=>{
						this.userInfo = res.data
						uni.hideLoading()
						
					})
				},
				goBack(){
					uni.navigateBack()
				},
				//更换头像
				gotoFeeds(){
					var that = this
					// 1，选择头像文件
					uni.chooseImage({
						count: 1,
						success: (res) => {
							// console.log(res)
							// 2上传文件
							uni.uploadFile({
								url: env.baseUrl+"/file/upload",
								filePath: res.tempFilePaths[0],
								name: "file",
								success: (res2) => {
									// console.log(res2)
									// console.log(res2.data)
									// console.log(JSON.parse(res2.data))
									var data = JSON.parse(res2.data)
									if (data.code == 200) {
										that.userInfo.avatar = data.data.url
										this.updateMember()
									} else {
										uni.showModal({
											title: "提示信息",
											content: "更改失败！"
										})
									}
								}
							})
						}
					})
				},
				updateMember(){
					var that = this
					that.userInfo.avatar = '1111111'
					member.updateMemberInfo(that.userInfo).then((res)=>{
						uni.setStorageSync({
							key:'userInfo',
							data:that.userInfo,
						})
					})
				},
				toggle(){
					this.showMask = true
				},
				closePopup(){
					this.showMask = false
				},
				togglePassword(){
					this.showPassword = true
				},
				closePassword(){
					this.showPassword = false
				},
				Qzyzm(){
					register.getCode(this.userInfo.mobile).then((res)=>{
						if(res.data.code == 'OK'){
							uni.showToast({
								icon:'none',
								title:'验证码已发送！'
							})
						}else{
							uni.showToast({
								icon:'none',
								title:'请稍后再试！'
							})
						}
					})
					var num = 60;
					if( this.QzyzmStare == false){
						this.Qztime ='60';
						this.Qztext = 's后获取';
						this.QzyzmStare = true;
						var interval = setInterval(() =>{
							--this.Qztime
						},1000)
						setTimeout(()=>{
							clearInterval(interval)
							this.Qztext = '点击获取'
							this.Qztime = ''
							this.QzyzmStare = false
						},60000)				
					}
				},
				changePassword(){
					if(this.newPassword == this.newRepeatPassword){
						if(this.authCode != ''){
							user.updatePassword(
							{
								mobile:this.userInfo.mobile,
								password:this.newPassword,
								verificationCode:this.authCode,
								username:this.userInfo.username
							}).then((res)=>{
								if(res.code == 200){
									this.showPassword = false
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:'请输入验证码！'
							})
						}
					}else{
						uni.showToast({
							icon:'none',
							title:'两次输入密码不一致，请确认！'
						})
					}
				},
				changeMobile(){
					if(this.oldMobile != this.newMobile){
						if(this.authCode != ''){
							user.updateMobile(
							{
								oldmobile:this.oldMobile,
								newmobile:this.newMobile,
								verificationCode:this.authCode,
							}).then((res)=>{
								if(res.code == 200){
									this.showMask = false
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:'请输入验证码！'
							})
						}
					}else{
						uni.showToast({
							icon:'none',
							title:'请不要输入相同的手机号！'
						})
					}
				},
			}
		};
</script>

<style>
	.scv {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		background: #fff;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.center_img {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin-top: 30%;
	}
	
	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		padding-left: 3%;
	}
	
	.form-left{
		display: inline;
		margin-left: 16px;
		padding:10px 0;
		margin: 10rpx 16rpx;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}
		
	.login_from{
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	
	.login_from_input{ 
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	} 
	.login_from_name{
		width: 40%; 
	}
	.login_from_fun{ 
		width: 60%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
</style>